<template>
  <a-form :form="form" :label-col="{ span: 8 }" :label-align="'left'">
    <a-form-item label="上传类型">
      <a-radio-group
        v-decorator="[
          'uploadType',
          {
            rules: [{ required: true, message: '请选择!' }],
            initialValue: 'shapefile',
          },
        ]"
        size="small"
        button-style="solid"
        @change="changeUploadType"
      >
        <a-radio-button value="shapefile">
          <span class="gis-upload-type">shapefile</span>
        </a-radio-button>
        <a-radio-button value="table">
          <span class="gis-upload-type">表格</span>
        </a-radio-button>
      </a-radio-group>
    </a-form-item>
    <!-- 导入文件 -->
    <div class="import-file-row">
      <div class="upload-file-select">
        <a-form-item
          label="导入文件"
          :label-col="{ span: 8 }"
          :label-align="'left'"
        >
          <a-upload
            :multiple="uploadType === 'shapefile'"
            :accept="fileAccept[uploadType]"
            :file-list="fileList"
            :custom-request="customRequest"
            :before-upload="beforeUpload"
            class="gis-upload"
            @change="handleUpload"
          >
            <a-button class="upload-file-button" style="width: 200px;">
              <span class="upload-file-icon">
                <a-icon-font type="iconshujuguanli-daorushuju" />
              </span>
              <span class="upload-file-text">选择文件</span>
            </a-button>
          </a-upload>
        </a-form-item>
      </div>
      <div v-if="fileList.length !== 0 && uploadType === 'table'">
        <div
          class="upload-file-info"
          :style="{ height: '25px', lineHeight: '40px' }"
        >
          <a-icon-font type="iconxuanzewenjian-copy" />
          <div class="upload-file-text">{{ fileList[0].name }}</div>
          <img
            alt=""
            src="@/assets/form/delete-file.svg"
            @click="clearFormFileInfo()"
          />
        </div>
        <div class="progress-loading">
          <a-progress
            style="flex: 1;"
            :percent="loadingProgress"
            :status="uploadingState"
            :show-info="true"
          />
          <div
            class="loading-text"
            :style="{
              color: uploadingState === 'complete' ? '#53c41c' : '#5c5c5c',
            }"
          >
            {{ loadingText }}
          </div>
        </div>
      </div>
      <!-- <div v-if="fileList.length !== 0" class="clear-file-icon">
        <a-icon-font type="iconicon-beifen5" @click="clearFormFileInfo()" />
      </div> -->
    </div>

    <!-- 已经上传的表 -->
    <div
      v-if="fileList.length > 0 && uploadType === 'shapefile'"
      class="file-list"
    >
      <span
        v-for="(file, index) in fileList"
        :key="index"
        class="uploaded-file"
      >
        <a-icon-font type="iconxuanzewenjian-copy" />
        {{ file.name }}
        <!--        <a-icon-font type="iconicon-beifen5" @click="deleteFileItem(file)" />-->
      </span>
    </div>
    <!-- 坐标系   -->
    <!-- <a-form-item v-if="uploadType === 'shapefile'" label="坐标系">
      <a-select
        v-decorator="[
          'coordinateSystem',
          {
            rules: [{ required: true, message: '请选择坐标系!' }],
            initialValue: coordinateSystem,
          },
        ]"
        placeholder="请选择"
        class="select-box"
        size="small"
        style="width: 316px;"
        @change="changeCoordinateSystem"
      >
        <a-select-option
          v-for="coordinateSystem in datasetCoordinateSystems"
          :key="coordinateSystem.srid"
          :value="coordinateSystem.srid"
          :disabled="coordinateSystem.disabled"
          >{{ coordinateSystem.name }}
        </a-select-option>
      </a-select>
    </a-form-item> -->

    <a-form-item label="文件编码">
      <a-select
        v-decorator="[
          'codingType',
          {
            rules: [{ required: true, message: '请选择编码!' }],
            initialValue: codingType,
          },
        ]"
        placeholder="请选择"
        class="select-box"
        size="small"
        style="width: 316px;"
        @change="changeCodingType"
      >
        <a-select-option
          v-for="codingType in datasetCodingTypes"
          :key="codingType"
          :value="codingType"
          >{{ codingType }}
        </a-select-option>
      </a-select>
    </a-form-item>

    <div class="data-name">
      <div class="data-name-input">
        <a-form-item label="数据集名称">
          <a-input
            v-decorator="[
              'datasetName',
              {
                rules: [
                  { required: true, message: '请输入数据集名称!' },
                  {
                    validator: (rule, value, callback) => {
                      if (value.includes(' ')) {
                        callback('数据集名不允许含有空格!')
                        return false
                      }
                      return true
                    },
                  },
                ],
                validateTrigger: ['blur', 'change'],
                initialValue: datasetName,
              },
            ]"
            :max-length="50"
            allow-clear
            class="name-input"
            size="small"
            style="width: 316px;"
            @change="changeDatabaseName"
          />
        </a-form-item>
      </div>
      <div v-if="uploadType === 'table'" class="set-first-line-to-listed">
        <a-checkbox
          :checked="firstLineAsFields"
          style="margin-right: 0;"
          @click="changeFirstLine"
        >
          将第一行作为数据表的列字段名称
        </a-checkbox>
      </div>
    </div>
  </a-form>
</template>

<script lang="ts">
/**
 * modal of gis file
 * @author
 */
import { Component, Vue } from 'vue-property-decorator'
import GisDataStore from '@/store/modules/gis-data'
import DataStore from '@/store/modules/data'

@Component
export default class GisModal extends Vue {
  // 批次号
  private get batch(): string {
    return GisDataStore.batch
  }
  private form: any // form 表单
  // 上传类型
  public get uploadType(): string {
    return GisDataStore.uploadType
  }
  // 不同上传类型不同接受上传的文件类型
  public fileAccept: any = {
    table: '.csv,.xlsx,.xls', // 表格类型
    shapefile: '.shp,.shx,.dbf,.prj,.cpg', // shapefile
  }
  // 大文件上传
  private fileMd5: string = ''
  private uploadingState: string = 'active' // 加载状态
  private loadingProgress: number = 0 // 加载进度
  private loadingText: string = '导入中' // 加载文本
  private isCancel: boolean = true // 是否取消上传
  private isUploading: boolean = false // 是否正在上传
  private datasetData: any = null // 传入预览表的数据（在预览组件中有用到）原数据

  // 导入文件 array
  public get fileList() {
    return GisDataStore.fileList
  }
  // 坐标系
  private get coordinateSystem(): string {
    return GisDataStore.coordinateSystem
  }
  private get datasetCoordinateSystems(): any[] {
    return [
      { name: 'GCS_WGS_1984', srid: 4326, disabled: false },
      { name: 'GCS_Beijing_1954', srid: 4214, disabled: false },
      { name: 'GCS_Xian_1980', srid: 4610, disabled: false },
      { name: 'GCS_Batavia_Jakarta', srid: 4813, disabled: false },
      {
        name: 'WGS_1984_Web_Mercator_Auxiliary_Sphere',
        srid: 3857,
        disabled: false,
      },
      { name: 'WGS_1984_World_Mercator', srid: 3395, disabled: false },
    ]
  }
  // 编码格式
  private get codingType(): string {
    return GisDataStore.codingType
  }
  // 文件编码选项
  private get datasetCodingTypes(): Array<string> {
    return this.uploadType === 'table'
      ? GisDataStore.datasetCodingTypes
      : ['gbk', 'utf-8', 'LATIN1']
  }
  // 数据集名称
  public get datasetName(): string {
    return GisDataStore.datasetName
  }

  private firstLineAsFields: boolean = true // 是否首行作为字段名  // 表格文件启用
  private tableSeparate = ',' // 分隔符
  private tableQuote = '"' // 引用符
  private tableEscape = '"' // 转义符

  /**
   * 更新批次号
   */
  public updateBatchNumber() {
    if (this.uploadType === 'shapefile') {
      GisDataStore.updateBatchNumber()
    }
  }

  public created() {
    this.form = this.$form.createForm(this, { name: 'database_form' })
    this.updateBatchNumber()
    GisDataStore.setFileList([])
  }

  /**
   * 修改上传类型
   */
  public changeUploadType($event: any) {
    GisDataStore.setUploadType($event.target.value)
    if ($event.target.value === 'table') {
      GisDataStore.setCodingType('utf-8')
    } else if ($event.target.value === 'shapefile') {
      GisDataStore.setCodingType('gbk')
    }
    this.clearFormFileInfo()
  }

  /**
   * 上传前限制文件大小
   */
  public beforeUpload(file: any) {
    const isLt1G = file.size / 1024 / 1024 / 1024 < 1
    if (!isLt1G) {
      this.$message.error('超过文件大小限制（1GB）!')
    }
    return isLt1G
  }

  /**
   * 选择文件上传文件 / 修改编码 / 修改是否使用首行做表头都需要上传文件 获取预览数据
   */
  public customRequest(option: any) {
    if (this.uploadType === 'table') {
      this.uploadTableFiles(option)
    } else if (this.uploadType === 'shapefile') {
      this.uploadShapeFiles(option)
    }
  }

  /**
   * 上传 表格 文件
   * @param option
   */
  public async uploadTableFiles(option: any, md5: string = '') {
    const [, fileType] = option.file.name.toString().split('.')
    this.tableSeparate = fileType === 'csv' ? ',' : ''
    this.tableQuote = fileType === 'csv' ? '"' : ''
    this.tableEscape = fileType === 'csv' ? '"' : ''

    const formData = new window.FormData()
    formData.append('filename', option.file.name)
    formData.append('charSet', this.codingType) // 编码格式
    formData.append('separate', this.tableSeparate)
    formData.append('quote', this.tableQuote)
    formData.append('escape', this.tableEscape)
    // formData.append('file', option.file) // 文件
    formData.append('firstLineAsFields', String(this.firstLineAsFields)) // 第一行是否作为数据表的列字段名称
    this.isCancel = false
    this.isUploading = true
    try {
      // 只有csv需要分块上传
      if (fileType === 'csv') {
        this.loadingProgress = 0
        this.uploadingState = 'active'
        this.loadingText = '导入中'

        const chunkSize = 5242880 // 5MB

        const totalChunks: any = Math.ceil(option.file.size / chunkSize) // 块数
        if (md5 === '') {
          // 扫描文件计算文件MD5值
          this.fileMd5 = (await this.scanningFile(option.file)) as string
        } else {
          // 如果是传入了非空的md5值，则说明是在文件编码类型切换调用的，所以直接上传就好了
          this.fileMd5 = md5
          this.loadingText = '扫描完成'
          this.uploadingState = 'complete'
        }

        formData.append('totalChunks', totalChunks) // 块数
        formData.append('identifier', this.fileMd5)

        // 如果只剩一块则直接上传
        if (totalChunks <= 1) {
          // this.$emit('update-spin-state', { value: true, message: '导入中' })
          this.loadingProgress = 100
          formData.append('file', option.file)
          formData.set('chunkNumber', '0')
          await this.uploadTableDirect(formData)
          this.isCancel = false
          this.isUploading = false
        } else {
          // 检查文件md5值
          const response = await DataStore.checkFileMd5(formData)
          if (response.data.code === 100) {
            const { result } = response.data
            const { code, data, missChunks } = result
            if (code === 200) {
              // 文件已经存在
              this.datasetData = data
              this.loadingProgress = 100
              this.fileUpLoadEnd()
            } else if (code === 206) {
              // 文件上传了一部分
              // 先获取已经上传过的文件块的处理进度
              const checkProgress = await this.checkUploadedChunksProgress(
                formData,
                totalChunks
              )
              this.loadingProgress = Math.floor(
                (100 * (totalChunks - missChunks.length)) / totalChunks
              )
              // 判断code是200还是206
              if (checkProgress.code === 200) {
                this.datasetData = checkProgress.data
                this.loadingProgress = 100
                this.fileUpLoadEnd()
              } else if (checkProgress.code === 206) {
                // 开始上传未上传的文件块
                await this.uploadChunkFile(
                  option.file,
                  formData,
                  option,
                  missChunks
                )
              } else if (code === 405) {
                this.$message.warning('该环节出现错误，请重复执行')
              }
            } else if (code === 404) {
              // 文件没有上传过
              const allChunks = []
              for (let i = 0; i < totalChunks; i += 1) {
                allChunks.push(i)
              }
              await this.uploadChunkFile(
                option.file,
                formData,
                option,
                allChunks
              )
            } else if (code === 405) {
              this.$message.warning('该环节出现错误，请重复执行')
            }
          }
          // 如果没有请求成功，则打印报错信息
          else if (response.data.tips) {
            this.$message.warning(response.data.tips)
          } else {
            this.$message.warning(response.data.message)
          }
          this.isUploading = false
        }
      } else {
        // excel文件和图文件不需要分块上传
        formData.append('file', option.file)
        await this.uploadTableDirect(formData)
        // await this.uploadFile(formData, option)
        if (fileType === 'xls' || fileType === 'xlsx') {
          this.fileUpLoadEnd()
        }
      }
    } catch (error) {
      this.$emit('update-spin-state', { value: false, message: '' })
      GisDataStore.setFileList([])
      this.$message.error('数据上传失败，请稍后重试')
      console.error(`upload error: ${error}`)
    }
  }

  /**
   * 直接调用上传接口，不走大文件的逻辑
   */
  private async uploadTableDirect(formData: any) {
    try {
      const response = await GisDataStore.uploadTableFile(formData)
      if (response.data.code === 100) {
        const { result } = response.data
        // GisDataStore.setPreviewData(result.data) // 预览数据
        this.datasetData = result.data
        this.validateItem(true)
      } else {
        GisDataStore.setFileList([])
        // GisDataStore.setPreviewData(null) // 预览数据
        this.datasetData = null
        if (response.data.tips) {
          this.$message.warning(response.data.tips)
        } else {
          this.$message.warning(response.data.message)
        }
      }
      this.fileUpLoadEnd()
    } catch (error) {
      this.$emit('gis-data-change', null)
      this.$emit('update-spin-state', { value: false, message: '' })
      GisDataStore.setFileList([])
      this.$message.error('数据上传失败，请稍后重试')
      console.error(`upload error: ${error}`)
    }
  }

  // 扫描文件并计算MD5值
  public scanningFile(file: any) {
    return new Promise((resolve, reject) => {
      this.loadingProgress = 0
      this.uploadingState = 'active'
      this.loadingText = '扫描中'

      // 计算文件md5值
      const SparkMD5 = require('spark-md5')
      const blobSlice = File.prototype.slice
      const chunkSize = 5242880 // 5MB
      const chunks = Math.ceil(file.size / chunkSize)
      const spark = new SparkMD5.ArrayBuffer()
      const fileReader = new FileReader()
      let currentChunk = 0

      const loadNext = () => {
        const start = currentChunk * chunkSize
        const end =
          start + chunkSize >= file.size ? file.size : start + chunkSize
        fileReader.readAsArrayBuffer(blobSlice.call(file, start, end))
      }

      fileReader.addEventListener('load', (event: any) => {
        spark.append(event.target.result) // Append array buffer
        currentChunk += 1

        if (this.isCancel) {
          reject()
        }

        this.loadingProgress = Math.floor((100 * currentChunk) / chunks)
        if (currentChunk < chunks) {
          loadNext()
        } else {
          const md5: string = spark.end() // 得到md5
          spark.destroy() // 释放缓存
          this.loadingText = '扫描完成'
          this.uploadingState = 'complete'
          resolve(md5)
        }
      })

      fileReader.addEventListener('error', () => {
        console.warn('oops, something went wrong.')
        file.cancel()
        this.loadingText = '扫描失败'
        this.uploadingState = 'exception'
      })

      loadNext()
    })
  }

  // 获取已经上传的文件块的处理进度
  public async checkUploadedChunksProgress(formData: any, totalChunks: number) {
    this.uploadingState = 'active'
    this.loadingText = '校验中'

    // 每隔timedelay毫秒发送一次请求
    const checkProgressInInterval = (timeDelay: number) => {
      return new Promise((resolve) => {
        setTimeout(async () => {
          const response = await DataStore.checkProgress(formData)
          if (response.data.code === 100) {
            const { result } = response.data
            const { code, progress, data } = result
            // 如果progress和result都为空，则还没开始处理，如果progress为空，result不为空，则表示上传结束
            if (progress === null) {
              resolve({ code, data, success: true })
            } else {
              this.loadingProgress = Math.floor((100 * progress) / totalChunks)
              resolve({ code, data, success: false })
            }
          }
        }, timeDelay)
      })
    }

    // eslint-disable-next-line no-constant-condition
    while (true) {
      if (this.isCancel) {
        throw new Error('file upload cancel')
      }
      try {
        // eslint-disable-next-line no-await-in-loop
        const { code, data, success }: any = await checkProgressInInterval(500)
        if (success) {
          return { code, data }
        }
      } catch (error) {
        throw new Error(error)
      }
    }
  }

  /* *
   * 上传分块文件
   *  首先上传第一块文件，用于检查文件表头信息
   *  如果第一块文件上传成功，则分10个块为1组，同步上传
   *  都上传成功后，再上传最后一个文件
   * */
  public async uploadChunkFile(
    file: any,
    formData: any,
    option: any,
    missChunks: any[]
  ) {
    this.uploadingState = 'active'
    this.loadingText = '导入中'
    let allSuccess: boolean = false // 是否全部导入成功

    const blobSlice = File.prototype.slice
    const chunkSize = 5242880 // 5MB
    const chunks = Math.ceil(file.size / chunkSize)
    let completeChunks = chunks - missChunks.length
    this.loadingProgress = Math.floor((100 * completeChunks) / chunks)

    // 加载分块文件
    const loadChunkFile = (chunkIndex: number) => {
      const start = chunkIndex * chunkSize
      const end = start + chunkSize >= file.size ? file.size : start + chunkSize
      return blobSlice.call(file, start, end)
    }

    formData.append('chunkNumber', 0)
    formData.append('chunkSize', chunkSize)
    formData.append('file', option.file)

    // 临时数组，保存最后渲染的数据
    let temporaryData: any = []

    // 封装请求一组发送
    const requestLists = []
    const firstChunk = missChunks[0]
    let lastChunk = null
    if (missChunks.length > 1) {
      lastChunk = missChunks[missChunks.length - 1]
    }
    missChunks = missChunks.slice(0, -1)
    for (let i = 1; i < missChunks.length; i += 10) {
      requestLists.push(missChunks.slice(i, i + 10))
    }

    // 同时请求
    const requestUploadFileChunks = (requests: number[]) => {
      return new Promise((resolve, reject) => {
        let success: boolean = true
        let passedRequset = 0 // 已经返回的请求数

        // 对每个文件片进行请求
        requests.forEach((chunkIndex: number) => {
          // 隔30ms发送一次，减少服务器压力
          setTimeout(() => {
            const chunkFile = loadChunkFile(chunkIndex)
            formData.set('file', chunkFile)
            formData.set('chunkNumber', chunkIndex.toString())
            DataStore.uploadDatasetFile(formData).then(
              (response: any) => {
                passedRequset += 1
                // 如果中途取消了
                if (this.isCancel) {
                  reject()
                }
                if (response.data.code === 100) {
                  completeChunks += 1
                  this.loadingProgress = Math.floor(
                    (100 * completeChunks) / chunks
                  )
                  // 后端返回上传成功，则获取数据
                  if (response.data.result.complete) {
                    allSuccess = true
                    temporaryData = response.data.result.data // 预览数据
                  }
                } else {
                  success = false
                }
                // 如果当前所有请求完了
                if (passedRequset === requests.length) {
                  resolve(success)
                }
              },
              () => {
                passedRequset += 1
                success = false
              }
            )
          }, 30)
        })
      })
    }

    try {
      // 先上传第一个块，如果第一个请求失败了，就不继续上传了
      const firstSuccess = await requestUploadFileChunks([firstChunk])
      if (firstSuccess) {
        // eslint-disable-next-line no-restricted-syntax
        for (const list of requestLists) {
          // eslint-disable-next-line no-await-in-loop
          await requestUploadFileChunks(list)
        }

        if (lastChunk !== null) {
          // 最后上传最后一个
          await requestUploadFileChunks([lastChunk])
        }
      }
    } catch (error) {
      console.log(error)
      return
    }

    // 所有请求都返回了
    if (allSuccess) {
      this.datasetData = temporaryData
      this.fileUpLoadEnd()
    } else {
      this.uploadingState = 'exception'
      this.loadingText = '导入失败'
    }
  }

  // csv和excel文件上传完毕
  public fileUpLoadEnd() {
    this.validateItem(true)
    this.$emit('gis-data-change', this.datasetData)
    GisDataStore.setPreviewData(this.datasetData)
    this.loadingText = '导入完成'
    this.loadingProgress = 100
    this.uploadingState = 'complete'
    this.isCancel = false
    this.isUploading = false
  }

  /**
   * 上传 shapefile 文件
   * @param option
   */
  public async uploadShapeFiles(option: any) {
    const formData = new window.FormData()
    formData.append('files', option.file)
    formData.append('batch', this.batch)
    this.$emit('update-spin-state', { value: true, message: '导入中' })
    try {
      // 上传文件
      const response = await GisDataStore.uploadShapeFiles(formData)
      if (response.data.code === 100) {
        this.$message.success('上传成功！')
        // prj 坐标系文件 返回 srid
        if (response.data.result.srid) {
          this.changeCoordinateSystem(response.data.result.srid)
        }
        // 展示所有上传的文件
        this.afterUploadShapeFile(option.file)
      } else {
        GisDataStore.setFileList([])
        if (response.data.tips) {
          this.$message.warning(response.data.tips)
        } else {
          this.$message.warning(response.data.message)
        }
      }
      this.$emit('update-spin-state', { value: false, message: '' })
    } catch (error) {
      this.$emit('update-spin-state', { value: false, message: '' })
      GisDataStore.setFileList([])
      this.$message.error('数据上传失败，请稍后重试')
      console.error(`upload error: ${error}`)
    }
  }

  public afterUploadShapeFile(file: any) {
    const fileInfo: any = {
      lastModified: file.lastModified,
      name: file.name,
      size: file.size,
      status: file.status,
      uid: file.uid,
    }
    // 覆盖之前的
    const fileType = file.name.slice(file.name.lastIndexOf('.') + 1)
    const index: number = this.fileList.findIndex((item: any) => {
      const currentFileType: string = item.name.slice(
        item.name.lastIndexOf('.') + 1
      )
      return currentFileType === fileType
    })
    if (index > -1) {
      this.fileList.splice(index, 1)
    }
    this.fileList.push(fileInfo)
    // GisDataStore.setFileList([...GisDataStore.fileList, fileInfo])
    this.validateItem(true)
    const name: string = this.fileList[0].name.slice(
      0,
      this.fileList[0].name.lastIndexOf('.')
    )
    GisDataStore.setDatasetName(name)
  }

  /**
   * shapefile 一个类型 只能上传一个文件，重复上传会覆盖
   * table 只能上传一个文件
   */
  public async handleUpload(info: any) {
    const { file } = info
    // table
    if (this.uploadType === 'table') {
      GisDataStore.setFileList([file])
      // 获取类型
      const fileType = this.fileList[0].name.slice(
        this.fileList[0].name.lastIndexOf('.') + 1
      )
      GisDataStore.setUploadTypeTableFileType(
        fileType.includes('csv') ? 'csv' : 'excel'
      )
      const name: string = this.fileList[0].name.slice(
        0,
        this.fileList[0].name.lastIndexOf('.')
      )
      GisDataStore.setDatasetName(name)
      if (info.fileList.length === 0) {
        GisDataStore.setPreviewData(null) // 预览数据
      }
    }
  }

  /**
   * 当导入文件后， 显示确认按钮
   */
  public validateItem(value: boolean) {
    this.$emit('confirm-visible', value)
  }

  /**
   * 清除上传文件
   */
  public clearFormFileInfo() {
    this.validateItem(false) // 隐藏预览
    GisDataStore.setPreviewData(null) // 预览数据
    GisDataStore.setFileList([]) // 清空已上传累表
    GisDataStore.setDatasetName('') // 清空数据集名称
    if (this.uploadType === 'table') {
      GisDataStore.setUploadTypeTableFileType('')
    } else if (this.uploadType === 'shapefile') {
      this.updateBatchNumber() // 更新 批号
    }
  }

  /**
   * 坐标系修改
   */
  public changeCoordinateSystem(type: any) {
    GisDataStore.setCoordinateSystem(type)
  }

  /**
   * 编码修改
   */
  public changeCodingType(type: any) {
    GisDataStore.setCodingType(type)
  }

  /**
   * 修改数据集名称
   * @param $event
   */
  public changeDatabaseName($event: any) {
    GisDataStore.setDatasetName($event.target.value)
  }

  /**
   * 是否 将第一行作为数据表的列字段名称
   */
  public changeFirstLine() {
    this.firstLineAsFields = !this.firstLineAsFields
    GisDataStore.setFirstLineAsFields(this.firstLineAsFields)
    if (this.fileList?.length > 0) {
      const fileOption: any = {
        file: this.fileList[0].originFileObj,
      }
      this.uploadTableFiles(fileOption)
    }
  }
}
</script>
<style lang="less" scoped>
/* gis modal */

.ant-form-item {
  display: flex;
  height: 40px;
  margin-bottom: 6px;
  width: 100%;
}

/deep/ .ant-col-8 {
  width: 100px;
}

.gis-upload-type {
  display: inline-block;
  text-align: center;
  width: 85px;
}

// 上传文件 button
.upload-file-button {
  align-items: center;
  display: flex;
  justify-content: center;

  .upload-file-icon {
    font-size: 16px;
  }

  .upload-file-text {
    display: inline-block;
    height: 16px;
    margin-left: 7px;
  }

  &:hover {
    color: #7d8aff;
  }
}

// 上传选择
.gis-upload button {
  border-radius: 4px;
  font-size: 12px;
  height: 24px;
  line-height: 14px;
  padding-left: 12px;
  width: 97px;

  &:active,
  &:focus {
    border-color: rgb(217, 217, 217);
    color: rgba(0, 0, 0, 0.65);
  }
}

/* 上传导入的文件 */
.import-file-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;

  .upload-file-select {
    height: 40px;
    width: 300px;
  }

  .upload-file-info {
    cursor: pointer;
    margin-left: 12px;
    min-width: 400px;
    top: 27px;

    .upload-file-text {
      color: #6973ff;
      display: inline-block;
      margin-left: 8px;
      margin-right: 8px;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: bottom;
      white-space: nowrap;
      // width: 100px;
    }
  }

  .progress-loading {
    align-items: center;
    display: flex;
    font-size: 12px;
    margin-left: 31px;
    width: 400px;

    .loading-text {
      margin-left: 10px;
    }
  }

  .clear-file-icon {
    color: #6973ff;
    margin-left: 8px;
  }
}

// 已上传文件名称
.file-list {
  color: #6973ff;
  display: flex;
  height: 40px;
  line-height: 40px;
  margin-bottom: 6px;
  padding-left: 100px;
  width: 100%;

  .uploaded-file {
    margin: 0 12px;
  }
}

// 数据集名称
.data-name {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 6px;
  min-height: 38px;
  width: 100%;

  .data-name-input {
    flex-shrink: 0;
    height: 40px;
    width: 440px;
  }

  .set-first-line-to-listed {
    flex-shrink: 0;
    height: 40px;
    line-height: 40px;
    width: 440px;
  }
}
</style>
